<template>
  <view class="guahao">
    <view class="left">
      <view
        class="item"
        @click="tabChange(item._id)"
        :class="{ bg: item._id == tabVlaue }"
        v-for="(item, index) in guahaoList"
        :key="index"
      >
        <p class="p1">{{ item.dep_ment }}</p>
      </view>
    </view>
    <view class="right">
      <p
        class="p2"
        @click="goDoctor(item.dep_id)"
        v-for="(item, index) in guahaoList1"
        :key="item.dep_id"
      >
        {{ item.dep_name }}
      </p>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import type { guahaoT, regdetailT } from "../../types/type";
import { api } from "../../api/api";
const guahaoList = ref<guahaoT[]>([]);
const guahaoList1 = ref<regdetailT[]>([]);
const getList = async () => {
  const res: any = await api.department();
  console.log(res);
  guahaoList.value = res.data;
};

const tabVlaue = ref<string>("af2b6af462e1780b000b7ac649eef401");
const getList1 = async () => {
  const res: any = await api.reglist({ id: tabVlaue.value });
  guahaoList1.value = res.data[0]?.dep_ment_list;
};
const tabChange = (id: string) => {
  tabVlaue.value = id;
  getList1();
};
const goDoctor = (id: string) => {
  uni.navigateTo({
    url: "/navPage/doctor/doctor?dep_id=" + id,
  });
};
onMounted(() => {
  getList();
  getList1();
});
</script>

<style lang="scss" scoped>
.guahao {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f6f6f6;
  display: flex;

  .left {
    width: 30%;
    height: 100%;
    background-color: #fff;
    overflow-y: scroll;
    .bg {
      background-color: #f8f8f8 !important;
      color: #4f64eb;
    }
    .item {
      line-height: 80rpx;
      .p1 {
        text-align: center;
      }
    }
  }
  .right {
    width: 70%;
    height: 100%;
    background-color: #f6f6f6;
    .p2 {
      margin: 50rpx;
    }
  }
}
</style>
